<template>
	<view id="app" v-if="isStatus">
		<!--身份选择和账户受限-->
		<view class="top">
			<view class="ver ais" v-if="isChoose">
				<view class="f40 fw5 mtb20 pl50 c000">您的身份是？</view>
				<view class="f26 pl50 c333">请根据实际身份选择</view>
				<view class="btn" @click="chooseType('member')">
					<view class="content">
						<view class="img">
							<image :src="shifu"></image>
						</view>
						<view class="con_title">我是瓦工</view>
					</view>
					<view class="icon">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="btn" @click="chooseType('user')">
					<view class="content">
						<view class="img">
							<image :src="yonghu"></image>
						</view>
						<view class="con_title">我是用户</view>
					</view>
					<view class="icon">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
			<view class="kefu ver" v-else>
				<view class="tips">您的账号已受限，请联系客服!</view>
				<uv-button color="#145cfe" iconColor="#fff" open-type="contact" text="联系客服"
					icon="server-man"></uv-button>
			</view>
		</view>
		<view class="bottom">
			<view class="mifeng">
				<image :src="mifeng"></image>
			</view>
			<view class="center"></view>
			<view class="logo">
				<image :src="logo"></image>
			</view>
		</view>
	</view>
	<view id="app" v-else-if="isMember">
		<!--师傅首页-->
		<!--定位搜索-->
		<view class="container">
			<view class="f1 df br30 bgw bd1s brccd ">
				<view class="df aic w150 pr10 pl20 mtb10 br1s brc9" @click="handle('index/location')">
					<view class="f1 f30 c000">{{location.city}}</view>
					<view class="w30">
						<uv-icon name="arrow-down" size="26rpx"></uv-icon>
					</view>
				</view>
				<view class="f1 df" @click="handle('member/index/search')">
					<view class="f1 df pl15 aic">
						<uv-icon name="search" size="40rpx"></uv-icon>
						<view class="f28 c999 mtb10">点我搜索</view>
					</view>
					<view class="w120 bginfo cw br30 plr20 ptb10 df aic jcc f30">搜索</view>
				</view>
			</view>
			<view class="df aic w60 pl20 jcc" @click="handle('member/message/message',true,'member')">
				<uv-icon name="chat" size="56rpx"></uv-icon>
			</view>
		</view>
		<!--轮播图-->
		<view class="container">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="5000"
				indicator-active-color="#145cfe" indicator-color="#aaa" duration="500" easing-function="easeInOutCubic">
				<swiper-item v-for="(item,index) in memberSwiper" :key="index">
					<view class="swiper-item">
						<image :src="item.image"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--菜单-->
		<view class="container">
			<uv-row>
				<uv-col span="3" v-for="(item,index) in memberNav" :key="index">
					<view class="ver jcc w180" @click="handle(item.url,item.isLogin,'member')">
						<view class="wh80">
							<image :src="item.image"></image>
						</view>
						<view class="f32 fw4 h50">{{item.title}}</view>
					</view>
				</uv-col>
			</uv-row>
		</view>
		<view class="container">
			<view class="bgw ver ptb20 plr10 w100p">
				<view class="df ais w100p">
					<view class="f1 df w160 aic jcc" @click="handle('index/textview?type=cate&id=6')">
						<view>
							<uv-icon name="checkmark-circle" color="#646466" size="30rpx"></uv-icon>
						</view>
						<view class="c000 f32 fw4">全程保障</view>
					</view>
					<view class="f1 df w160 aic  jcc" @click="handle('index/textview?type=cate&id=8')">
						<view>
							<uv-icon name="checkmark-circle" color="#646466" size="30rpx"></uv-icon>
						</view>
						<view class="c000 f32 fw4">放心购买</view>
					</view>
					<view class="f1 df w160 aic jcc" @click="handle('index/textview?type=cate&id=7')">
						<view>
							<uv-icon name="checkmark-circle" color="#646466" size="30rpx"></uv-icon>
						</view>
						<view class="c000 f32 fw4">服务无忧</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="container">
			<view class="adv-con">
				<view class="adv-left">
					<image :src="memberItem.sc" @click="handle('member/train/train')"></image>
				</view>
				<view class="adv-right">
					<view class="adv-top">
						<image :src="memberItem.join"  @click="handle('member/mine/personal',true,'member')"></image>
					</view>
					<view class="adv-bottom">
						<image :src="memberItem.bz" @click="handle('index/textview?type=cate&id=4')"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="df aic jcsb w100p">
				<view class="f36 fw5 tac pr">
					<view class="mborder"></view>
					<view class="mtxt">实操训练营</view>
				</view>
				<view class="df w110 bd1s brc9 c666 br30  aic jcc f28" @click="handle('member/train/train')">更多</view>
			</view>
		</view>
		<view class="container">
			<swiper class="train-swiper" circular :indicator-dots="true" :autoplay="true" interval="4000"
				indicator-active-color="#145cfe" indicator-color="#aaa" duration="500">
				<swiper-item v-for="(item,index) in trainCourse" :key="index">
					<view class="swiper-item" @click="handle('member/train/detail?id='+item.id)">
						<image :src="item.thumb"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container memberadv" @click="handle('index/textview?type=cate&id=9')">
			<image :src="memberAdv.image"></image>
		</view>
		<view class="container">
			<view class="df aic jcsb w100p">
				<view class="f36 fw5 tac pr">
					<view class="mborder"></view>
					<view class="mtxt">线上课程</view>
				</view>
				<view class="f1 df  c99 f30 pr15 jcr aie c666">
					<view>海量课程等你看</view>
				</view>
				<view class="df w110 bd1s brc9 c666 br30  aic jcc f28" @click="handle('member/course/course')">更多</view>
			</view>
		</view>
		<view class="container fdc">
			<block v-for="(item,index) in courseItem" :key="index">
				<view class="bgw df ptb20 plr15">
					<view class="w300 h180 br30 courseImg">
						<image :src="item.thumb"></image>
					</view>
					<view class="f1 ml15">
						<view class="f32 fw4 h120 t2hd">{{item.title}}</view>
						<view class="df">
							<view class="f1 df f30 c666 plr10 ptb10">{{item.read}}人看过</view>
							<view class="w130 bd1s brc9 c999 f26 tac br15 ptb10 plr15"
								@click="handle('member/course/detail?id='+item.id)">立即学习</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="ver c999 mt10 mb30">
			<view class="f24">
				版权所有(©)匠徕徕
			</view>
		</view>
		<view class="h100"></view>
		<uv-tabbar :value="0" iconSize="50rpx" activeColor="#00a0e8" inactiveColor="#9ea09f" zIndex="1000">
			<uv-tabbar-item text="首页">
				<template v-slot:active-icon>
					<image class="wh50" :src="memberSelected"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="memberSelecte"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="课程" icon="grid" @click="handle('member/course/course')"></uv-tabbar-item>
			<uv-tabbar-item text="消息" icon="chat" @click="handle('member/message/message',true,'member')"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account" @click="handle('member/mine/mine',true,'member')"></uv-tabbar-item>
		</uv-tabbar>
	</view>
	<view id="app" v-else-if="isUser">
		<!--用户首页-->
		<view class="container">
			<view class="f1 df br30 bgw bd1s brccd ">
				<view class="df aic w150 pr10 pl20 mtb10 br1s brc9" @click="handle('index/location')">
					<view class="f1 f30 c000">{{location.city}}</view>
					<view class="w30">
						<uv-icon name="arrow-down" size="24rpx"></uv-icon>
					</view>
				</view>
				<view class="f1 df" @click="handle('user/cate/cate')">
					<view class="f1 df pl15">
						<uv-icon name="search" size="40rpx"></uv-icon>
						<view class="f28 c999 mtb10">装铺师傅</view>
					</view>
					<view class="w120 bgwaring cw br30 plr20 ptb10 df aic jcc f30">搜索</view>
				</view>
			</view>
			<view class="df aic w60 pl20 jcc" @click="handle('user/message/message',true,'user')">
				<uv-icon name="chat" size="56rpx"></uv-icon>
			</view>
		</view>
		<view class="container">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="3000"
				indicator-active-color="#FFAC3E" indicator-color="#aaa" duration="500">
				<swiper-item v-for="(item,index) in userSwiper" :key="index">
					<view class="swiper-item">
						<image :src="item.image"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container">
			<uv-row>
				<uv-col span="3" v-for="(item,index) in userNav" :key="index">
					<view class="ver jcc w180" @click="handle(item.url,item.isLogin,'user')">
						<view class="wh80">
							<image :src="item.image"></image>
						</view>
						<view class="f32 fw4 h50">{{item.title}}</view>
					</view>
				</uv-col>
			</uv-row>
		</view>
		<view class="container">
			<view class="adv-con">
				<view class="adv-left" @click="handle('user/cate/cate')">
					<image :src="UserItem.sc"></image>
				</view>
				<view class="adv-right" >
					<view class="adv-top"  @click="handle('index/textview?type=cate&id=5')">
						<image :src="UserItem.join"></image>
					</view>
					<view class="adv-bottom"  @click="handle('index/textview?type=cate&id=4')">
						<image :src="UserItem.bz"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="df aic jcsb w100p">
				<view class="f36 fw5 tac pr">
					<view class="uborder"></view>
					<view class="txt">资深工匠推荐</view>
				</view>
				<view class="df w110 bd1s brc9 c666 br30  aic jcc f28" @click="handle('user/cate/cate')">更多</view>
			</view>
		</view>
		<view class="container">
			<swiper class="index-swiper" circular :indicator-dots="true" :autoplay="true" interval="4000"
				indicator-active-color="#FFAC3E" indicator-color="#aaa" duration="500">
				<swiper-item v-for="(item,index) in member" :key="index">
					<view class="swiper-items rows">
						<view class="plr10 w240"  v-for="(it,ix) in item" :key="ix">
							<view class="w220 h340 mb20">
								<image :src="it.avatar" class="w220 h340" mode="aspectFill"></image>
							</view>
							<view class="df fdc w220 oh">
								<view class="f30 c000 tac mb10">{{it.name}}</view>
								<view class="f26 c999 thd">
									<text v-if="it.workage == 1">3年铺装经验</text>
									<text v-if="it.workage == 2">5年铺装经验</text>
									<text v-if="it.workage == 3">10年铺装经验</text>
									<text v-if="it.workage == 4">10年铺装经验</text>
									.{{it.tags}}</view>
							</view>
						</view>
						
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container memberadv">
			<image :src="userAdv.image"></image>
		</view>
		<view class="container">
			<view class="df aic jcsb w100p">
				<view class="f36 fw5 tac pr">
					<view class="uborder"></view>
					<view class="txt">排行榜</view>
				</view>
				<view class="f1 df  c99 f30 pr15 jcr aie c666">
					<view></view>
				</view>
				<view class="df w110 bd1s brc9 c666 br30  aic jcc f28" @click="handle('user/cate/cate')">更多</view>
			</view>
		</view>
		<view class="container fdc">
			<view class="df fdc bgw mb20  ptb15" v-for="(item,index) in memberlist" :key="index">
				<view class="df w100p aic plr15 bdb1s brcce pb20" @click="handle('user/cate/detail?id='+item.user_id)">
					<view class="wh140 mr20">
						<uv-avatar :src="item.avatar" size="140rpx"></uv-avatar>
					</view>
					<view class="f1 df fdc mb20">
						<view class="df ptb20 aic">
							<view class="c000 f30 fw8 mr10">{{item.name}}</view>
							<uv-tags text="实名认证" type="warning" plain size="mini" v-if="item.is_auth == 1"></uv-tags>
						</view>
						<view class="df jcl thd">
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15" v-if="item.great_name !=''">{{item.great_name}}</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15" v-if="item.great_images !=''">专业技能证书</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15 " v-if="item.workage == 1">3年经验</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15 " v-if="item.workage == 2">5年经验</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15 " v-if="item.workage == 3">10年经验</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15 " v-if="item.workage == 4">10多年经验</view>
						</view>
					</view>
				</view>
				<view class="mt20 df fdc" v-if="item.cases.length > 0">
					<view class="plr15 f30 c666">施工案例</view>
					<view class="mt20 w100p pl10">
						<uv-album :urls="item.cases" keyName="thumb" singleSize="690rpx" multipleSize="230rpx" space="10rpx"
							:showMore="false"></uv-album>
					</view>
				</view>
			</view>
		</view>
		<view class="ver c999 mt10 mb30">

			<view class="f24">
				版权所有(©)匠徕徕
			</view>
		</view>

		<uv-tabbar :value="0" iconSize="50rpx" activeColor="#FFAC3E" inactiveColor="#9ea09f" zIndex="1000"
			:fixed="true">
			<uv-tabbar-item text="首页">
				<template v-slot:active-icon>
					<image class="wh50" :src="uselected"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="uselecte"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="找工匠" @click="handle('user/cate/cate')">
				<template v-slot:active-icon>
					<image class="wh50" :src="ugjd"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="ugj"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="消息" icon="chat" @click="handle('user/message/message',true,'user')"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account" @click="handle('user/mine/mine',true,'user')"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				mifeng: this.util.config.host + '/static/images/mifeng.png',
				logo: this.util.config.host + '/static/images/logofull.png',
				shifu: this.util.config.host + '/static/images/shifu.png',
				yonghu: this.util.config.host + '/static/images/yonghu.png',
				memberSelected: this.util.config.host + '/static/images/homed.png',
				memberSelecte: this.util.config.host + '/static/images/home.png',
				uselected: this.util.config.host + '/static/images/uhomed.png',
				uselecte: this.util.config.host + '/static/images/home.png',
				ugjd: this.util.config.host + '/static/images/gjd.png',
				ugj: this.util.config.host + '/static/images/gj.png',
				memberNav: [{
						image: this.util.config.host + "/static/images/item1.png",
						title: "线上培训",
						url: 'member/course/course',
						isLogin:false,
					}, {
						image: this.util.config.host + "/static/images/item2.png",
						title: "训练营",
						url: 'member/train/train',
						isLogin:false,
					}, {
						image: this.util.config.host + "/static/images/item3.png",
						title: "我的课程",
						url: 'member/order/order',
						isLogin:true,
					},
					{
						image: this.util.config.host + "/static/images/item4.png",
						title: "我的订单",
						url: 'member/mine/order/order',
						isLogin:true,
					}
				],
				userNav: [{
						image: this.util.config.host + "/static/images/uitem1.png",
						title: "找工匠",
						url: 'user/cate/cate',
						isLogin:false,
					}, {
						image: this.util.config.host + "/static/images/uitem2.png",
						title: "排行榜",
						url: 'user/cate/cate',
						isLogin:false,
					}, {
						image: this.util.config.host + "/static/images/uitem3.png",
						title: "预约流程",
						url: 'index/textview?type=cate&id=5',
						isLogin:false,
					},
					{
						image: this.util.config.host + "/static/images/uitem4.png",
						title: "我的预约",
						url: 'user/order/order',
						isLogin:true,
					}
				],
				memberItem: {
					sc: this.util.config.host + "/static/images/sc.png",
					join: this.util.config.host + "/static/images/join.png",
					bz: this.util.config.host + "/static/images/bz.png",
				},
				UserItem: {
					sc: this.util.config.host + "/static/images/sc1.png",
					join: this.util.config.host + "/static/images/join1.png",
					bz: this.util.config.host + "/static/images/bz1.png",
				},
				isChoose: true,
				isStatus: false,
				isMember: false,
				isUser: false,
				location: {
					city: '需定位',
					city_id: '',
					lng: '',
					lat: '',
				},
				memberSwiper: [],
				userSwiper: [],
				memberAdv: {},
				userAdv: {},
				trainCourse: [],
				courseItem: [],
				previewImages: [],
				member:[],
				memberlist:[],
			}
		},
		async onLoad() {
			await this.$onLaunched;
			this.isStatus = uni.getStorageSync('QLXG_ISSTATUS'),
			this.isChoose = uni.getStorageSync('QLXG_ISCHOOSE'),
			this.isMember = uni.getStorageSync('QLXG_ISMEMBER'),
			this.isUser = uni.getStorageSync('QLXG_ISUSER')
			console.log('pageload');
			this.Banner('memberSwiper');
			this.Banner('userSwiper');
			this.Banner('memberAdv');
			this.Banner('userAdv');
			this.train();
			this.course();
			this.getMember();
			this.memberList();

		},
		onShow() {
			if (uni.getStorageSync('QLXG_LOCATION')) {
				this.location = JSON.parse(uni.getStorageSync('QLXG_LOCATION'));
			}
			console.log('page Show')
		},
		methods: {
			memberList:function(){
				let that = this;
				this.request({
					url:"/api/index/memberlist",
					success:function(rlt){
						if(rlt.code == 200){
							that.memberlist = rlt.data;
						}
					}
				})
			},
			getMember:function(){
				let that = this;
				this.request({
					url:"/api/index/member",
					success:function(rlt){
						if(rlt.code == 200){
							that.member = rlt.data;
						}
					}
				})
			},
			handle: function(e, isLogin = false,type="member") {
				if(isLogin == true){
					if(!uni.getStorageSync('QLXG_token')){
						uni.navigateTo({
							url:"/pages/"+type+"/index/login"
						})
						return false;
					}
				}
				uni.navigateTo({
					url: "/pages/" + e
				})

			},
			chooseType: function(e) {
				uni.setStorageSync('QLXG_ISSTATUS', false);
				this.isStatus = false;
				if (e == 'user') {
					uni.setStorageSync('QLXG_ISUSER', true);
					uni.setStorageSync('QLXG_ISMEMBER', false);
					this.isMember = false;
					this.isUser = true;
				}
				if (e == 'member') {
					uni.setStorageSync('QLXG_ISUSER', false);
					uni.setStorageSync('QLXG_ISMEMBER', true);
					//如果有分享触发分享
					this.isUser = false;
					this.isMember = true;
				}
			},
			train: function() {
				let that = this;
				that.request({
					url: '/api/index/train',
					success: function(res) {
						if (res.code == 200) {
							that.trainCourse = res.data;
						}
					},
				});
			},
			course: function() {
				let that = this;
				that.request({
					url: '/api/index/course',
					success: function(res) {
						if (res.code == 200) {
							that.courseItem = res.data;
						}
					},
				});
			},
			Banner: function(e) {
				let that = this;
				that.request({
					url: '/api/index/banner',
					data: {
						type: e
					},
					success: function(res) {
						if (res.code == '200') {
							if (e == 'memberSwiper') {
								that.memberSwiper = res.data;
							}
							if (e == 'userSwiper') {
								that.userSwiper = res.data;
							}
							if (e == 'memberAdv') {
								that.memberAdv = res.data;
							}
							if (e == 'userAdv') {
								that.userAdv = res.data;
							}
						}
					},
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.top {
		height: 50vh;
		display: flex;
		flex-direction: column;
	}

	.top .btn {
		margin: 20rpx;
		height: 150rpx;
		background: #fff;
		border-radius: 75rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.top .btn .content {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.top .btn .content .con_title {
		margin-left: 20rpx;
		font-size: 32rpx;
	}

	.top .btn .img {
		width: 120rpx;
		height: 120rpx;
	}

	.top .btn .icon {
		width: 30rpx;
		heigh: 30rpx;
	}

	.top .kefu .tips {
		font-size: 30rpx;
		margin: 150rpx 0 40rpx 0;
	}

	.bottom {
		height: 50vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottom .mifeng {
		width: 270rpx;
		height: 360rpx;
	}

	.bottom .center {
		height: 40rpx;
	}

	.bottom .logo {
		width: 320rpx;
		height: 90rpx;
	}

	.swiper {
		height: 360rpx;
		width: 720rpx;
	}

	.swiper-item {
		display: block;
		border-radius: 15rpx;
		overflow: hidden;
		height: 300rpx;

		image {
			border-radius: 15rpx;
		}
	}

	.adv-con {
		display: flex;
		flex-direction: row;
		align-items: center;

		.adv-left {
			width: 315rpx;
			height: 365rpx;
			display: flex;
			align-items: end;
			margin-right: 10rpx;
		}

		.adv-right {
			width: 395rpx;
			height: 371rpx;
			display: flex;
			flex-direction: column;

			.adv-top {
				height: 192rpx;
				margin-bottom: 10rpx;
				width: 100%;
			}

			.adv-bottom {
				height: 169rpx;
				width: 100%;
			}
		}
	}

	.train-swiper {
		height: 460rpx;
		width: 720rpx;

		.swiper-item {
			display: block;
			border-radius: 15rpx;
			overflow: hidden;
			height: 400rpx;

			image {
				border-radius: 15rpx;
			}
		}
	}
	.mborder{width:90%;height: 0;border-bottom: #145cfe 15rpx solid; border-radius: 0 0 15rpx 15rpx; position: absolute; bottom:0;left:5%;z-index: 1;}
	.mtxt{position: relative; z-index: 10;}
	.memberadv {
		height: 200rpx;
	}
	.index-swiper {
		height: 490rpx;width: 720rpx;
		.swiper-items {
			width:720rpx;overflow: hidden;
			height: 440rpx;
		}
	}
</style>